<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="filter-container">
      <el-row :gutter="0">
        <el-form :inline="true" class="search-form">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="query.range_date"
              type="daterange"
              class="filter-item"
              style="width: 240px;"
              range-separator="-"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button class="" type="success" icon="el-icon-refresh-right" plain @click="refresh()">刷新</el-button>
          </el-form-item>

          <el-form-item style="float: right">

          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <!-- 列表 -->
    <el-table ref="tableRef" v-loading="loading" :data="datas" :span-method="spanMethod" :max-height="height" style="width: 100%">
      <el-table-column type="selection" min-width="40" align="center"/>
      <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.items">
            {{ scope.row.title }} {{ scope.row.remark }}
          </span>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="field_1" label="字段1" min-width="120" align="center"/>
      <el-table-column prop="field_2" label="字段2" min-width="120" align="center"/>
      <el-table-column prop="field_3" label="字段3" min-width="120" align="center"/>
      <el-table-column prop="created_at" label="操作时间" min-width="160" align="center" sortable="custom"/>
      <el-table-column label="操作" min-width="80" align="center">
        <template slot-scope="{ row }">
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="list"/>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import {disabledTree, treeToList} from '@/utils/index'

export default {
  name: 'AdminAdminlog',
  components: {Pagination},
  data() {
    return {
      height: 680,
      loading: false,
      datas: [],
      total: 0,
      query: {
        page: 1,
        limit: 20,
        range_date: []
      },
      model: {}
    }
  },
  created() {
    this.height = screenHeight()
    this.list()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      setTimeout(() => {
        let data = [
          {
            id: 1,
            created_at: '2022-01-10',
            title: '测试数据001',
            remark: '备注001',
            items: [
              {
                id: '1-1',
                created_at: '2022-01-10 18:00',
                name: '测试数据001下面的子集001',
                field_1: '子集001的字段001',
                field_2: '子集001的字段002',
                field_3: '子集001的字段003',
              }
            ]
          },
          {
            id: 2,
            created_at: '2022-01-20',
            title: '测试数据002',
            remark: '备注002',
            items: [
              {
                id: '2-1',
                created_at: '2022-01-20 8:00',
                name: '测试数据002下面的子集001',
                field_1: '子集001的字段001',
                field_2: '子集001的字段002',
                field_3: '子集001的字段002',
              },
              {
                id: '2-2',
                created_at: '2022-01-20 18:00',
                name: '测试数据002下面的子集002',
                field_1: '子集002的字段001',
                field_2: '子集002的字段002',
                field_3: '子集002的字段002',
              }
            ]
          },
          {
            id: 3,
            created_at: '2022-01-30',
            title: '测试数据003',
            remark: '备注003',
            items: [
              {
                id: '3-1',
                created_at: '2022-01-30 18:00',
                name: '测试数据003下面的子集001',
                field_1: '子集001的字段001',
                field_2: '子集001的字段002',
                field_3: '子集001的字段003',
              }
            ]
          },
        ]
        this.datas = treeToList(data, 'items')
        this.total = 110
        this.loading = false
      }, 1000)
    },
    // 重置
    reset() {
      this.model = this.$options.data().model
    },
    // 查询
    search() {
      this.query.page = 1
      this.list()
    },
    // 刷新
    refresh() {
      this.query = this.$options.data().query
      this.list()
    },

    spanMethod({row, column, rowIndex, columnIndex}) {
      if (row.items) {
        if (columnIndex === 0) {
          return [1, 1]
        }
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 5
          }
        } else if (columnIndex === 6) {
          return [1, 1]
        } else {
          return [0, 0]
        }
      } else {
        return [1, 1]
      }
    },
  }
}
</script>
